<template>
  <div style="text-align: left;">
    This is a Test
    <p>
      I am {{author}}
    </p>
    <el-input v-model="authorIn" placeholder="sdsdds"/>
    <el-button slot="append" @click="setAuthorBtn">Ok</el-button>
    <div style="margin-top: 20px;">
      <el-button @click="print_store">print_store</el-button>
    </div>
    <div style="margin-top: 20px;">
      <el-button @click="goTest1">goTest1</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      authorIn: ''
    }
  },
  methods: {
    setAuthorBtn () {
      this.$store.commit('setAuthor', this.authorIn)
    },
    print_store () {
      // 获取store里面的数据
      console.log('this.$store.getters.getAuthor----->', this.$store.getters.getAuthor())
      console.log('this.$store.getters.getcurrent_a--->', this.$store.getters.getcurrent_a())
      console.log('this.$store.getters.getb_by_current_a--->', this.$store.getters.getb_by_current_a())
      console.log('this.$store.getters.getb_by_a--->', this.$store.getters.getb_by_a('1xsa'))

      // 提交数据到store
      this.$store.commit('pushYlist', {a: 'xxx', b: 'yyy'})
      // 获取store里面的ylist数据
      console.log('ylist', this.$store.getters.getYlist())
    },
    goTest1 () {
      this.$router.push('/test1')
    }
  },
  /**
   * 如下两个实现监听store里面的author属性的变化.
   */
  computed: {
    author () {
      return this.$store.state.author
    }
  },
  watch: {
    // 第一个参数：修改之前的值，第二个参数：修改之后的值
    author (newv, oldv) {
      console.log('watch--author-->', oldv, '--->', newv)
    }
  }
}
</script>
